<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div w50rem h50rem flex="~ col" justify-center items-center bg-dark>
    <div pt5>
      <dv-scroll-board ref="scrollBoard" :config="config" @click="clickHandler" ></dv-scroll-board>
    </div>

  </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { io } from "socket.io-client";

const list = reactive<any[]>([
  ['鞋拔', '百度', '前端工程师', '10k'],
  ['王五', '腾讯', '前端工程师', '20k'],
  ['张三', '阿里巴巴', '前端工程师', '30k'],
  ['李四', '网易', '前端工程师', '40k'],
  ['赵六', '字节', '前端工程师', '50k'],

])
onMounted(() => {
  const socket = io("http://localhost:8080");
  console.log(socket, 'socket');

  socket.on('data', (data: any) => {
    if (data.code) {
      const Item = [`${data.name}`, `${data.frim}`, `前端工程师`, `${data.wages}k`]
      list.splice(0, 1)
      list[list.length] = Item
    }

  });
})
// import type{reactive} from 'vue'
const config = reactive({
  header: ['姓名', '工作公司', '工作岗位', '薪资'],
  data: list,
  index: true,
  columnWidth: [50],
  align: ['center'],
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}

const updateRows = () => {
  config.data.push([`行${config.data.length + 1}列1`, `行${config.data.length + 1}列2`, `行${config.data.length + 1}列3`])
}
</script>

<style scoped>
.dv-scroll-board {
  width: 80%;
  height: 20vh;
  margin-left: 10%;
}
</style>